<!DOCTYPE HTML>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg height="300" width="300">
    <defs>
        <filter height="100px" width="100px" y="-1" x="-1" id="filter">
            <feOffset dy="2" dx="2" in="SourceGraphic" result="offOut"></feOffset>
        </filter>
    </defs>
    <rect x="50" y="20" width="20" height="20" fill="red"></rect>
    <rect filter="url(#filter)" width="100" height="100" fill="green"></rect>
    <rect id="invalidate" x="20" y="20" width="20" height="20" fill="red"></rect>
</svg>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

runAfterLayoutAndPaint(function() {
    document.getElementById('invalidate').setAttribute('fill', 'green');
    runAfterLayoutAndPaint(function() {
        if (window.testRunner)
            testRunner.notifyDone();
    });
});
</script>
